<template>
  <div class="search-inputs">
    <el-input
      v-if="col.fieldOptions.type === 'text' || !col.fieldOptions.type"
      v-model="searchFields[col.prop]"
      :placeholder="`请输入${col.label}`"
      clearable
    />
    <el-input-number
      v-else-if="col.fieldOptions.type === 'number'"
      v-model="searchFields[col.prop]"
      :placeholder="`请输入${col.label}`"
      clearable
    />
    <el-date-picker
        v-else-if="col.fieldOptions.type === 'date'"
        v-model="searchFields[col.prop]"
        type="datetime"
        :placeholder="`请输入${col.label}`"
        :format="col.fieldOptions.format || 'YYYY-MM-DD hh:mm:ss'"
      />
    <el-select
      v-else-if="col.fieldOptions.type === 'select'"
      v-model="searchFields[col.prop]"
      :placeholder="`请选择${col.label}`"
      clearable
      style="min-width:100px"
    >
      <el-option
        v-for="option in col.fieldOptions.options || []"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      />
    </el-select>
    <el-select
      v-else-if="col.fieldOptions.type === 'multiselect'"
      v-model="searchFields[col.prop]"
      :placeholder="`请选择${col.label}`"
      multiple
      clearable
      style="min-width:100px"
    >
      <el-option
        v-for="option in col.fieldOptions.options || []"
        :key="option.value"
        :label="option.label"
        :value="option.value"
      />
    </el-select>
  </div>
</template>

<script setup>
defineProps({
  col: {
    type: Object,
    required: true
  },
  searchFields: {
    type: Object,
    default: () => ({})
  }
})
</script>

<style scoped>
.search-inputs {
  width: 100%;
}
</style>